---
from: 'Melissa Jones <mj@code.org>'
subject: 'Test Email: Html with style'
---
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>[Slack] Notifications from the Code.org team for Jul 21st, 2015 at 1:30 pm</title>
<style type="text/css">
		

		/* Template styling */
		body {
			font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
			width: 100%;
			max-width: 100%;
			font-size: 17px;
			line-height: 24px;
			color: #373737;
			background: #F9F9F9;
		}
		h1, h2, h3, h4 {
			color: #2ab27b;
			margin-bottom: 12px;
			line-height: 26px;
		}
		p, ul, ul li {
			font-size: 17px;
			margin: 0 0 16px;
			line-height: 24px;
		}
		ul {
			margin-bottom: 24px;
		}
		ul li {
			margin-bottom: 8px;
		}
		p.mini {
			font-size: 12px;
			line-height: 18px;
			color: #ABAFB4;
		}
		p.message {
			font-size: 16px;
			line-height: 20px;
			margin-bottom: 4px;
		}
		hr {
			margin: 2rem 0;
			width: 100%;
			border: none;
			border-bottom: 1px solid #ECECEC;
		}
		a, a:link, a:visited, a:active, a:hover {
			font-weight: bold;
			color: #439fe0;
			text-decoration: none;
			word-break: break-word;
		}
		a:active, a:hover {
			text-decoration: underline;
		}
		.time {
			font-size: 11px;
			color: #ABAFB4;
			padding-right: 6px;
		}
		.emoji {
			vertical-align: bottom;
		}
		.avatar {
			border-radius: 2px;
		}
		#footer p {
			margin-top: 16px;
			font-size: 12px;
		}

		/* Client-specific Styles */
		#outlook a {padding:0;}
		body{width:100% !important; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; margin:0 auto; padding:0;}
		.ExternalClass {width:100%;}
		.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;}
		#backgroundTable {margin:0; padding:0; width:100%; line-height: 100% !important;}

		/* Some sensible defaults for images
		Bring inline: Yes. */
		img {outline:none; text-decoration:none; -ms-interpolation-mode: bicubic;}
		a img {border:none;}
		.image_fix {display:block;}

		/* Outlook 07, 10 Padding issue fix
		Bring inline: No.*/
		table td {border-collapse: collapse;}

	    /* Fix spacing around Outlook 07, 10 tables
	    Bring inline: Yes */
	    table { border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; }

		/* Mobile */
		@media only screen and (max-device-width: 480px) {
			/* Part one of controlling phone number linking for mobile. */
			a[href^="tel"], a[href^="sms"] {
						text-decoration: none;
						color: blue; /* or whatever your want */
						pointer-events: none;
						cursor: default;
					}

			.mobile_link a[href^="tel"], .mobile_link a[href^="sms"] {
						text-decoration: default;
						color: orange !important;
						pointer-events: auto;
						cursor: default;
					}

		}

		/* Not all email clients will obey these, but the important ones will */
		@media only screen and (max-width: 480px) {
			.card {
				padding: 1rem 0.75rem !important;
			}
			.link_option {
				font-size: 14px;
			}
			hr {
				margin: 2rem -0.75rem !important;
				padding-right: 1.5rem !important;
			}
		}

		/* More Specific Targeting */
		@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
		/* You guessed it, ipad (tablets, smaller screens, etc) */
			/* repeating for the ipad */
			a[href^="tel"], a[href^="sms"] {
						text-decoration: none;
						color: blue; /* or whatever your want */
						pointer-events: none;
						cursor: default;
					}

			.mobile_link a[href^="tel"], .mobile_link a[href^="sms"] {
						text-decoration: default;
						color: orange !important;
						pointer-events: auto;
						cursor: default;
					}
		}

		/* iPhone Retina */
		@media only screen and (-webkit-min-device-pixel-ratio: 2) and (max-device-width: 640px)  {
			/* Must include !important on each style to override inline styles */
			#footer p {
				font-size: 9px;
			}
		}

		/* Android targeting */
		@media only screen and (-webkit-device-pixel-ratio:.75){
			/* Put CSS for low density (ldpi) Android layouts in here */
			img {
				max-width: 100%;
				height: auto;
			}
		}
		@media only screen and (-webkit-device-pixel-ratio:1){
			/* Put CSS for medium density (mdpi) Android layouts in here */
			img {
				max-width: 100%;
				height: auto;
			}
		}
		@media only screen and (-webkit-device-pixel-ratio:1.5){
			/* Put CSS for high density (hdpi) Android layouts in here */
			img {
				max-width: 100%;
				height: auto;
			}
		}
		/* Galaxy Nexus */
		@media only screen and (min-device-width : 720px) and (max-device-width : 1280px) {
			img {
				max-width: 100%;
				height: auto;
			}
			body {
				font-size: 16px;
			}
		}
		/* end Android targeting */

		
		
	</style>
</head>
<body>
	<table width="100%" cellpadding="0" cellspacing="0" border="0" >
<tr>
<td valign="top" >
				<table width="100%" cellpadding="0" cellspacing="0" border="0" ><tr>
<td valign="bottom" >
							<div >
								<a href="http://staging.code.org/l/97rVjjIPSVZezpt_eiIh0Q==/MzUy">
																			<img src="https://codedotorg.slack.com/x-8000425732-8003908403/img/email/slack_logo.png" ></a>
							</div>
						</td>
					</tr></table>
</td>
		</tr>
<tr>
<td valign="top" >
				
<table cellpadding="32" cellspacing="0" border="0" align="center"><tr>
<td width="546" valign="top" >
	<div>
	<h2>Hi phil,</h2>

			<p>
			You have
							a new direct message									from the <strong>Code.org</strong> team (<a href="http://staging.code.org/l/97rVjjIPSVZezpt_eiIh0Q==/MzUz" >codedotorg.slack.com</a>).
		</p>

		<hr>
<table width="100%" cellpadding="0" cellspacing="0" border="0" align="center">
<h3>
					<a href="http://staging.code.org/l/97rVjjIPSVZezpt_eiIh0Q==/MzU0">@slackbot</a>
					<a href="http://staging.code.org/l/97rVjjIPSVZezpt_eiIh0Q==/MzU0">View in the archives</a>
				</h3>
																									<div>
													<a href="http://staging.code.org/l/97rVjjIPSVZezpt_eiIh0Q==/MzU1"><img src="https://slack-assets2.s3-us-west-2.amazonaws.com/10068/img/slackbot_72.png"></a>
												<div>
															<a href="http://staging.code.org/l/97rVjjIPSVZezpt_eiIh0Q==/MzU1">slackbot</a>
								<a href="http://staging.code.org/l/97rVjjIPSVZezpt_eiIh0Q==/MzU0">12:35 PM, Jul 21st</a><br>
														Hello, I'm Slackbot. I try to be helpful. (But IÃ¢â‚¬â„¢m still just a bot. Sorry!) Type *something* to get started.
						</div>
					</div>
																
			
						
		
	</table>
</div>
	</td>
	</tr></table>
<table cellpadding="32" cellspacing="0" border="0" align="center"><tr>
<td width="546" valign="top" >
	<div >
			<p>
			Also, since 12:50 pm on Jul 21st, when you were last in Slack,

							there have been
				<strong>44 messages</strong> in
				six channels.											</p>

		<hr>
<p>
		Snooze these notifications for: <a href="http://staging.code.org/l/97rVjjIPSVZezpt_eiIh0Q==/MzU2">an hour</a>, <a href="http://staging.code.org/l/97rVjjIPSVZezpt_eiIh0Q==/MzU3">eight hours</a>, <a href="http://staging.code.org/l/97rVjjIPSVZezpt_eiIh0Q==/MzU4" style="color: #439fe0; font-weight: bold; text-decoration: none; word-break: break-word;">a day</a>, <a href="http://staging.code.org/l/97rVjjIPSVZezpt_eiIh0Q==/MzU5" >three days</a>, or <a href="http://staging.code.org/l/97rVjjIPSVZezpt_eiIh0Q==/MzYw">the next week</a>.
		Or, <a href="http://staging.code.org/l/97rVjjIPSVZezpt_eiIh0Q==/MzYx" >turn email notifications off</a>. For more detailed preferences, see your <a href="http://staging.code.org/l/97rVjjIPSVZezpt_eiIh0Q==/MzYy">account page</a>.
	</p>

										</div>
									</td>
								</tr></table>
</td>
					</tr>
<tr>
<td >
					<table width="100%" cellpadding="0" cellspacing="0" border="0" align="center">
<tr>
<td></td>
						</tr>
<tr>
<td valign="top" align="center">
								<div>
																		<p >
										Made by <a href="http://staging.code.org/l/97rVjjIPSVZezpt_eiIh0Q==/MzYz" >Slack Technologies, Inc</a> Ã‚ Ã¢â‚¬Â¢Ã‚  
										<a href="http://staging.code.org/l/97rVjjIPSVZezpt_eiIh0Q==/MzY0">Our Blog</a><br><a href="#">155 5th Street, 6th Floor Ã‚ Ã¢â‚¬Â¢Ã‚  San Francisco, CA Ã‚ Ã¢â‚¬Â¢Ã‚  94103</a>
									</p>
																	</div>
							</td>
						</tr>
</table>
</td>
			</tr>
</table>
</body>
</html>

--==_mimepart_6ffe5a96d34385fb095179e93f3e703662--
